<template>
  <el-scrollbar>
    <div id="picixian" class="main contaner" v-loading="loading">
      <el-select
        v-model="provinceVal"
        @change="provinceChange"
        placeholder=" "
        style="width: 100px"
      >
        <el-option
          v-for="item in provincesOpt"
          :key="item.id"
          :label="item.letter + '-' + item.provinceName"
          :value="item.id"
        />
      </el-select>
      <div
        class="table-row el-col el-col-24 f14"
        v-for="item in piciData"
        :key="item.year"
      >
        <div class="table-fixed">
          <div class="pcl-title">{{ item.year || '-' }}年批次线</div>
          <table class="pcl-table" border="1">
            <thead>
              <tr>
                <th width="300">批次/段</th>
                <th width="300">科目</th>
                <th width="300">控制分数线</th>
                <th
                  class="df"
                  style="
                    height: 59px;
                    justify-content: center;
                    border-top: 1px solid transparent;
                    border-left: 1px solid transparent;
                    border-bottom: 1px solid transparent;
                    border-right: 1px solid transparent;
                  "
                >
                  <div>压线分区间</div>
                  <el-tooltip placement="top">
                    <template #content>
                      【压线分区间】因省控线通常按该批次计划总<br />数的120%划线，因此会导致该批次近20%考生<br />存在滑档或退档风险。在此我们通过逆向计算<br />得到压线分区间，建议在此分数区间的考生选择<br />多批次填报，以降低退/滑档风险。
                    </template>
                    <span
                      style="font-size: 14px; margin-left: 5px"
                      class="iconfont icon-wenhao"
                    ></span>
                  </el-tooltip>
                </th>
              </tr>
            </thead>
          </table>
        </div>
        <table
          border-spacing="0"
          cellspacing="1"
          v-for="chilItem in item.batches"
          :key="chilItem.id"
        >
          <tbody>
            <tr>
              <td
                width="300"
                align="center"
                class="batch"
                style="font-weight: bold"
              >
                {{ chilItem.batch || '-' }}
              </td>
              <td width="300" align="center">{{ chilItem.course || '-' }}</td>
              <td width="300" align="center">{{ chilItem.score || '-' }}</td>
              <td align="center">{{ chilItem.pressureRange || '-' }}</td>
            </tr>
            <tr class="remark-row" v-if="chilItem.eligibleMajorScore">
              <td colspan="5">
                <span class="text-666 f12" style="margin-left: 20px"
                  >专业分：{{ chilItem.eligibleMajorScore || '-' }}</span
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <tipsCard :tipsData="tipsData" :type="true" />
    </div>
  </el-scrollbar>
</template>

<script setup>
import tipsCard from '@/components/TipsCard';

import { getProvince } from '@/api/provinces/province';
import { getBatchLineInfo } from '@/api/picixian/picixian';
import { noteDesc } from '@/api/scoreline/scoreline';
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const provincesOpt = ref([]);

const piciData = ref([]);
const loading = ref(false);
const tipsData = ref({
  isShowIcon: true,
  tipsList: [],
  portDescription: '',
});
const userInfo = computed(() => store.getters.user.userInfo);
const provinceVal = ref('');

const fetchNoteDesc = () => {
  // 获取分数线描述信息
  noteDesc({
    type: 'pclDescription',
    pid: store.getters.user.userInfo.pid,
  }).then((res) => {
    tipsData.value.portDescription = res.data.data.pclDescription;
  });
};
fetchNoteDesc();

const fetchProvince = () => {
  getProvince().then((res) => {
    if (res.data.code == 20000) {
      provincesOpt.value = res.data.data;
      provinceVal.value = provincesOpt.value.filter(
        (v) => v.id == userInfo.value.pid,
      )[0].id;
    }
  });
};
const provinceChange = (val) => {
  provinceVal.value = val;
};
const reqData = ref({
  pid: '',
  more: 1,
  less: 0,
});
watch(provinceVal, (newValue) => {
  reqData.value.pid = newValue;
  fetchBatchLineInfo();
});
const fetchBatchLineInfo = () => {
  loading.value = true;
  getBatchLineInfo(reqData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        piciData.value = res.data.data;
        loading.value = false;
      } else {
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
fetchProvince();
</script>

<style lang="scss" scoped>
.contaner {
  padding-bottom: 150px;
}
.pcl-title {
  text-align: center;
  font-weight: bold;
  margin: 20px 0;
  font-size: 16px;
}
table {
  width: 100%;
  border-collapse: collapse; //合并为一个单一的边框
  border-color: #dfe6ec; //边框颜色按实际自定义即可
  border-left: 1px solid #ebeef5;
}
thead tr th {
  background-color: #f8f8f9; //设置表格标题背景色
  padding: 6px;
  text-align: center;
}
tbody tr td {
  padding: 6px;
  height: 48px; //设置单元格最小高度
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.pcl-table {
  background: #f5f5f5;
  height: 49px;
}
</style>
